<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="园所名称：" prop="schoolName">
                <el-select v-model="queryParams.code" @change="selectSchool" clearable filterable placeholder="请选择">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="年级：" prop="grade">
                <el-select v-model="queryParams.grade" placeholder="请选择年级" clearable size="small"  @change="getGradechange">
            <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
          </el-form-item>
         <el-form-item label="班级：" prop="class">
             <el-select v-model="queryParams.class" placeholder="请选择班级" clearable size="small">
               <el-option v-for="item in classOptions" :key="item.id" :label="item.title" :value="item.id" />
              </el-select>
          </el-form-item>
          <el-form-item label="幼儿名称：" prop="name">
                        <el-input
                          v-model="queryParams.childName"
                          placeholder="请输入幼儿名称"
                          clearable
                          size="small"
                        />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
          <el-form-item label="上报日期：" prop="type">
                <el-date-picker
                       v-model="dateTime"
                       type="date"
                       size="small"
                       value-format="yyyy-MM-dd"
                       @change="onChangeDate"
                       placeholder="选择日期">
                     </el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="fileList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
              <el-table-column  align="center" label="年级"  prop="nature"></el-table-column>
              <el-table-column  align="center" label="班级"  prop="attendance0"></el-table-column>
              <el-table-column  align="center" label="幼儿姓名"  prop="attendance4"></el-table-column>
              <el-table-column  align="center" label="性别" prop="sex" :formatter="sexFormat" />
              <el-table-column  align="center" label="家庭住址" prop="sex" :formatter="sexFormat" />
              <el-table-column  align="center" label="上报时间" prop="time"  />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
           </el-table>
           <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
        <!-- 健康档案详情 -->
        <el-dialog title="幼儿健康档案详情" :visible.sync="open" width="800px" append-to-body>
              <el-descriptions title="基础信息" class="margin-top"  :column="3">
                      <el-descriptions-item label="姓名">{{childdetailList.name}}</el-descriptions-item>
                      <el-descriptions-item label="身高">{{childdetailList.name}}</el-descriptions-item>
                      <el-descriptions-item label="体重">{{childdetailList.name}}</el-descriptions-item>
                      <el-descriptions-item label="bmi">{{childdetailList.name}}</el-descriptions-item>
                      <el-descriptions-item label="视力">{{childdetailList.name}}</el-descriptions-item>
                      <el-descriptions-item label="听力">{{childdetailList.name}}</el-descriptions-item>
                      <el-descriptions-item label="总结">{{childdetailList.name}}</el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions title="病史信息" class="margin-top"  :column="1">
                      <el-descriptions-item label="病史">有关于疾病的信息</el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions title="各器官信息" class="margin-top"  :column="1">
                      <el-descriptions-item label="心脏">健康</el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions title="疫苗接种信息" class="margin-top"  :column="1">
                      <el-descriptions-item label="疫苗">已接种</el-descriptions-item>
                  </el-descriptions>
              <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="childOk">确 定</el-button>
            <el-button @click="childOk">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
  import { specificList,clazzList,classData,studentList } from "@/api/qu/qyyerygk";
  import {schoolList } from "@/api/qu/qyyerygk";
  import moment from "moment";
 export default {
   name: "ysgyxx",
   data() {
     return {
         schoolCode:'',
         loading:true,
         dateTime:new Date(),
         schoolList:[],
          // 性别字典
        sexOptions: [],
          // 查询参数
          queryParams: {
            code:'',
             grade:'',
             class:'',
             childName:'',
             pageNum: 1,
             pageSize: 10,
           },
           gradeOptions:[],
           classOptions:[],
           total:0,
           open:false,
           fileList:[
            {}
           ],
           childdetailList:{
            name:'王五',
           }
        } 
   }, 
   created() {
        this.getDicts("year_type").then(response => {
          this.gradeOptions = response.data;
        });
        this.getDicts("sys_user_sex").then(response => {
        this.sexOptions = response.data;
      });
        this.getschoolList()
   },
   mounted(){
        this.getList()
   },
   methods: {
        async getList(){
            // this.loading=true;
            try {
              const obj={
                schoolCode:this.queryParams.code,
                grade:this.queryParams.grade,
                classCode:this.queryParams.class,
                name:this.queryParams.childName,
                inTime:moment(this.dateTime).format("YYYYMMDD"),
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
              }
             const data =  await specificList(obj)
             this.fileList=data.rows;
             this.fileList=[
                {schoolName:'幼儿有'}
             ]
             this.total=data.total;
             this.loading=false;
            } catch (error) {
              console.log(error);
            }
        },
        //clazzList 获取班级列表
       async  getClazzList(){
            try {
               const obj ={
                 schoolCode:this.queryParams.code,
                 year:this.queryParams.grade
               }
              const data=  await  clazzList(obj)
              this.classOptions=data.rows
            } catch (error) {
              console.log(error);
            }
        },
         //获取学校列表
        async getschoolList(){
           const data = await schoolList();
           this.schoolList=data.rows;
           this.getClazzList()
       },
       selectSchool(){
            this.getClazzList()
       },
        getGradechange(){
            this.getClazzList()
        },
        onChangeDate(){

        },
             // 序号
       customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
       },
       handleView(){
            this.open=true
       },
       childOk(){
        this.open=false;
       },
        handleQuery(){},
        resetQuery(){

        },
         // 性别字典翻译
      sexFormat(row, column) {
        return this.selectDictLabel(this.sexOptions, row.sex);
      },
    
   }
 };
</script>